<template>
  <!-- 该组件适用于有子节点的节点，即Object/Array/ref类型 -->
  <div class="gradient-multiple-container">
    <!-- 当前节点的类型为array -->
    <template v-if="jsonSchemaTool.isComplexType(currentSchema, 0)">
      <div class="schema-node_row">
        <div class="schema-node_row_name">
          <!-- 空白填充 -->
          <p
            :style="{
              width:
                16 *
                  (jsonSchemaTool.isComplexType(currentSchema.items, 1)
                    ? currentIndex + 1
                    : currentIndex + 2) +
                'px',
            }"
          ></p>
          <div
            class="schema-node-field_input_bg"
            :class="{ 'schema-node_disabled': !writable }"
          >
            <div class="schema-node-field_input_bg_bgItem">
              <!-- 非叶子节点节点展开符号 -->
              <div
                v-if="
                  jsonSchemaTool.isComplexType(currentSchema.items, 1) ||
                  currentSchema.items.$ref
                "
                class="schema-node-expand-icon"
                :class="{ 'schema-node-expand-icon-active': itemExpand }"
                @click="itemExpand = !itemExpand"
              ></div>
              <!-- 节点名称 -->
              <div class="schema-node-text">
                <div class="schema-node-text-wrapper">
                  <!-- 测试专用 -->
                  <el-popover
                    popper-class="common-popover"
                    placement="top-end"
                    title=""
                    trigger="hover"
                  >
                    <p>{{ currentSchema }}</p>
                    <p>{{ currentIndex }}</p>
                    <el-tag slot="reference" class="json-schema-tag" size="mini"
                      >ITEM</el-tag
                    >
                  </el-popover>
                  <!-- <el-tag class="json-schema-tag" size="mini">ITEM</el-tag> -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 节点类型 -->
        <div class="schema-node_row_schemaType">
          <el-popover
            :ref="`type-item-${currentName}`"
            popper-class="common-popover"
            placement="right"
            trigger="click"
            @show="handleShowType(`type-item-${currentName}`)"
          >
            <div class="menu-item loc-start" v-for="ele in list3" :key="ele.id">
              <div class="menu-item-text" @click="handleChangeType(ele.name)">
                {{ ele.name }}
              </div>
            </div>
            <div
              slot="reference"
              class="schema-node-schema-type_typeSelect"
              :style="{ cursor: !writable ? 'not-allowed' : 'pointer' }"
            >
              <span
                :class="
                  jsonSchemaTool.getTypeTextColor(currentSchema.items) + '-text'
                "
              >
                <span
                  :title="
                    jsonSchemaTool.getTypeTextColor(currentSchema.items) ==
                    'ref'
                      ? jsonSchemaTool.analysisSchemaRef(
                          jsonSchema,
                          currentSchema.items.$ref
                        ).name
                      : jsonSchemaTool.getTypeTextColor(currentSchema.items)
                  "
                  >{{
                    jsonSchemaTool.getTypeTextColor(currentSchema.items) ==
                    "ref"
                      ? jsonSchemaTool.analysisSchemaRef(
                          jsonSchema,
                          currentSchema.items.$ref
                        ).name
                      : jsonSchemaTool.getTypeTextColor(currentSchema.items)
                  }}</span
                >
                <span
                  v-if="currentSchema.items.format"
                  :title="currentSchema.items.format"
                  >{{ "<" + currentSchema.items.format + ">" }}</span
                >
              </span>
            </div>
          </el-popover>
          <!-- 必填按钮 -->
          <div
            v-if="currentIndex != 1"
            class="schema-node-schema-type_required"
            :class="[
              jsonSchemaTool.isRequired(currentSchema, currentName)
                ? 'schema-type_checked-btn'
                : '',
              currentSchema.type == 'array' ? 'schema-node_disabled' : '',
            ]"
            :style="{ cursor: !writable ? 'not-allowed' : 'pointer' }"
          >
            <div class="schema-node-schema-check_box">
              <svg
                t="1732522263422"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="3417"
                width="1em"
                height="1em"
              >
                <path
                  d="M534.869333 490.496a1403.306667 1403.306667 0 0 0 50.858667-25.813333c16.042667-8.618667 29.013333-15.061333 38.570667-19.029334 9.557333-3.925333 17.066667-6.058667 22.869333-6.058666 9.557333 0 17.749333 3.2 24.917333 10.026666 6.826667 6.826667 10.581333 15.061333 10.581334 25.088 0 5.76-1.706667 11.818667-5.12 17.92-3.413333 6.101333-7.168 10.069333-10.922667 11.861334-35.157333 14.677333-74.410667 25.429333-116.736 31.872 7.850667 7.168 17.066667 17.237333 28.330667 29.781333 11.264 12.544 17.066667 18.986667 17.749333 20.053333 4.096 6.101333 9.898667 13.653333 17.408 22.613334 7.509333 8.96 12.629333 15.786667 15.36 20.778666 2.730667 5.034667 4.437333 11.093333 4.437333 18.304a33.706667 33.706667 0 0 1-9.898666 24.021334 33.834667 33.834667 0 0 1-25.6 10.410666c-10.24 0-22.186667-8.618667-35.157334-25.472-12.970667-16.512-30.037333-46.933333-50.517333-91.050666-20.821333 39.424-34.816 65.962667-41.642667 78.506666-7.168 12.544-13.994667 22.186667-20.48 28.672a30.976 30.976 0 0 1-22.528 9.685334 32.256 32.256 0 0 1-25.258666-11.093334 35.413333 35.413333 0 0 1-9.898667-23.68c0-7.893333 1.365333-13.653333 4.096-17.578666 25.258667-35.84 51.541333-67.413333 78.848-93.568a756.650667 756.650667 0 0 1-61.44-12.544 383.061333 383.061333 0 0 1-57.685333-20.48c-3.413333-1.749333-6.485333-5.717333-9.557334-11.818667a30.208 30.208 0 0 1-5.12-16.853333 32.426667 32.426667 0 0 1 10.581334-25.088 33.152 33.152 0 0 1 24.234666-10.026667c6.485333 0 14.677333 2.133333 24.576 6.101333 9.898667 4.266667 22.186667 10.026667 37.546667 18.261334 15.36 7.893333 32.426667 16.853333 51.882667 26.538666-3.413333-18.261333-6.485333-39.082667-8.874667-62.378666-2.389333-23.296-3.413333-39.424-3.413333-48.042667 0-10.752 3.072-19.712 9.557333-27.264A30.677333 30.677333 0 0 1 512.341333 341.333333c9.898667 0 18.090667 3.925333 24.576 11.477334 6.485333 7.893333 9.557333 17.92 9.557334 30.464 0 3.584-0.682667 10.410667-1.365334 20.48-0.682667 10.368-2.389333 22.570667-4.096 36.906666-2.048 14.677333-4.096 31.146667-6.144 49.834667z"
                  :fill="
                    jsonSchemaTool.isRequired(currentSchema, currentName)
                      ? '#f04438'
                      : '#798294'
                  "
                  p-id="3418"
                ></path>
              </svg>
            </div>
          </div>
          <!-- 允许为NULL按钮 -->
          <div class="schema-node-schema-type_nullable">
            <div
              class="schema-node-schema-check_box"
              :class="[
                jsonSchemaTool.isNullAble(currentSchema)
                  ? 'schema-type_checked-btn'
                  : '',
              ]"
              :style="{ cursor: !writable ? 'not-allowed' : 'pointer' }"
            >
              <svg
                t="1732525053558"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="7302"
                width="1em"
                height="1em"
              >
                <path
                  d="M324.935534 863.194594l-45.870724 0L233.19511 863.194594 233.19511 160.805406l56.860009 0 57.337893 0 351.671455 570.810431L699.064466 160.805406l45.870724 0 45.870724 0 0 702.389188-52.082192 0-52.082192 0L324.935534 290.182009 324.935534 863.194594z"
                  p-id="7303"
                  :fill="
                    jsonSchemaTool.isNullAble(currentSchema)
                      ? '#f04438'
                      : '#798294'
                  "
                ></path>
              </svg>
            </div>
          </div>
          <!-- 高级设置按钮 -->
          <el-popover
            v-if="writable"
            popper-class="common-popover"
            placement="top"
            title="高级设置"
            trigger="hover"
          >
            <el-popover
              :ref="`typeSenior-items-${currentName}`"
              popper-class="common-popover dataType-popover"
              placement="right"
              trigger="click"
              title="数据类型"
              slot="reference"
              @after-enter="
                showPopover(
                  `typeSenior-items-${currentName}`,
                  `${currentName}FormRef-items`
                )
              "
              @hide="hidePopover(`${currentName}FormRef-items`)"
            >
              <TypeForm
                :ref="`${currentName}FormRef-items`"
                :parentSchema="parentSchema"
                :currentSchema.sync="currentSchema.items"
                :currentIndex="currentIndex"
                :currentName="currentName"
                :isArrayItems="true"
                :treeData="treeData"
                :globalTreeData="globalTreeData"
                @updateNodeDataType="updateNodeDataType"
                @updatePopoverPos="updatePopoverPos"
                @updateJsonSchema="updateJsonSchema"
              ></TypeForm>
              <div slot="reference" class="schema-node-type_morder-type">
                <div class="schema-node-schema-check_box">
                  <svg
                    t="1732526723934"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="11871"
                    width="1em"
                    height="1em"
                  >
                    <path
                      d="M728.615385 590.769231a137.846154 137.846154 0 0 1 0 275.692307h-433.23077a137.846154 137.846154 0 0 1 0-275.692307h433.23077z m0 31.507692h-433.23077a106.338462 106.338462 0 0 0-6.695384 212.48l6.695384 0.196923h433.23077a106.338462 106.338462 0 0 0 6.695384-212.48l-6.695384-0.196923zM315.076923 649.846154a78.769231 78.769231 0 1 1 0 157.538461 78.769231 78.769231 0 0 1 0-157.538461z m0 31.507692a47.261538 47.261538 0 1 0 0 94.523077 47.261538 47.261538 0 0 0 0-94.523077zM728.615385 157.538462a137.846154 137.846154 0 0 1 0 275.692307h-433.23077a137.846154 137.846154 0 0 1 0-275.692307h433.23077z m0 31.507692h-433.23077a106.338462 106.338462 0 0 0-6.695384 212.48l6.695384 0.196923h433.23077a106.338462 106.338462 0 0 0 6.695384-212.48L728.615385 189.046154z m-19.692308 27.569231a78.769231 78.769231 0 1 1 0 157.538461 78.769231 78.769231 0 0 1 0-157.538461z m0 31.507692a47.261538 47.261538 0 1 0 0 94.523077 47.261538 47.261538 0 0 0 0-94.523077z"
                      fill="#667085"
                      p-id="11872"
                    ></path>
                  </svg>
                </div>
              </div>
            </el-popover>
          </el-popover>
        </div>
        <!-- 中文名部分 -->
        <div class="schema-node-row_title">
          <div class="schema-node-text">
            <div class="schema-node-text-wrapper">
              <input
                slot="reference"
                class="schema-node-text-input"
                :class="{ 'schema-node-input_disabled': !writable }"
                placeholder="字段名"
                type="text"
                :value="currentSchema.title"
                :disabled="!writable"
              />
            </div>
          </div>
        </div>
        <!-- 说明部分 -->
        <div class="schema-node-row_description">
          <div class="schema-node-text">
            <div class="schema-node-text-wrapper">
              <input
                slot="reference"
                class="schema-node-text-input"
                :class="{ 'schema-node-input_disabled': !writable }"
                placeholder="字段名"
                type="text"
                :value="currentSchema.description"
                :disabled="!writable"
              />
            </div>
          </div>
        </div>
        <!-- 操作按钮部分 -->
        <div class="schema-node-row_operation">
          <!-- 更多按钮 -->
          <el-popover
            v-if="
              jsonSchemaTool.hasMoreBtn(
                currentSchema.items,
                currentIndex,
                true
              ) && writable
            "
            popper-class="common-popover"
            placement="bottom-end"
            title=""
            trigger="hover"
            :visible-arrow="false"
          >
            <div
              class="menu-item"
              v-for="ele in list2"
              :key="ele.id"
              @click="dataModelExtract()"
            >
              <div class="menu-item-icon loc-center">
                <img
                  :src="require(`/public/images/jsonSchema/${ele.icon}.svg`)"
                  alt=""
                  style="width: 16px; height: 16px"
                />
              </div>
              <div class="menu-item-text">{{ ele.name }}</div>
            </div>
            <div slot="reference" class="operation-btn dropdown-trigger">
              <div class="app_icon">
                <svg
                  t="1732585388135"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="12981"
                  width="1em"
                  height="1em"
                >
                  <path
                    d="M298.688 512c0-23.552 19.072-42.688 42.624-42.688h0.384a42.688 42.688 0 0 1 0 85.376h-0.384A42.688 42.688 0 0 1 298.624 512zM511.808 469.312a42.688 42.688 0 0 0 0 85.376h0.384a42.688 42.688 0 0 0 0-85.376h-0.384zM682.624 469.312a42.688 42.688 0 1 0 0 85.376h0.384a42.688 42.688 0 1 0 0-85.376h-0.384z"
                    fill="#2e90fa"
                    p-id="12982"
                  ></path>
                  <path
                    d="M512 970.688A458.688 458.688 0 1 1 512 53.312a458.688 458.688 0 0 1 0 917.376zM117.312 512a394.688 394.688 0 1 0 789.376 0A394.688 394.688 0 0 0 117.312 512z"
                    fill="#2e90fa"
                    p-id="12983"
                  ></path>
                </svg>
              </div>
            </div>
          </el-popover>
          <div v-else style="width: 24px; height: 24px"></div>
          <!-- 新增按钮 -->
          <el-popover
            v-if="jsonSchemaTool.hasAddBtn(currentSchema.items) && writable"
            popper-class="common-popover"
            placement="top-end"
            title="添加子节点"
            trigger="hover"
          >
            <div
              slot="reference"
              class="operation-btn dropdown-trigger-add"
              @click="handleMenuClick(2)"
            >
              <div class="app_icon">
                <svg
                  t="1732585461762"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="14084"
                  width="1em"
                  height="1em"
                >
                  <path
                    d="M512 954.88c-243.712 0-442.88-199.168-442.88-442.88s199.168-442.88 442.88-442.88 442.88 199.168 442.88 442.88-199.168 442.88-442.88 442.88z m0-63.488c208.896 0 379.392-170.496 379.392-379.392s-170.496-379.392-379.392-379.392-379.392 170.496-379.392 379.392 170.496 379.392 379.392 379.392z m192-360.96h-363.52c-14.336 0-26.624-11.776-26.624-26.624V496.64c0-14.336 11.776-26.624 26.624-26.624h363.52c14.336 0 26.624 11.776 26.624 26.624v7.168c0 14.336-12.288 26.624-26.624 26.624z m-212.48 171.52l1.024-363.52c0-14.336 11.776-26.624 26.624-26.624h7.168c14.336 0 26.624 11.776 26.624 26.624l-1.024 363.52c0 14.336-11.776 26.624-26.624 26.624h-7.168c-14.848 0-26.624-11.776-26.624-26.624z"
                    p-id="14085"
                    fill="#139659"
                  ></path>
                </svg>
              </div>
            </div>
          </el-popover>
          <div v-else style="width: 24px; height: 24px"></div>
          <!-- 删除按钮 -->
          <div v-if="false" class="operation-btn dropdown-trigger-delete">
            <div class="app_icon">
              <svg
                t="1732585574234"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="15302"
                width="1em"
                height="1em"
              >
                <path
                  d="M512.006144 63.997952C264.568832 63.997952 64 264.57088 64 511.987712c0 247.433216 200.568832 448.014336 448.006144 448.014336 247.425024 0 447.993856-200.58112 447.993856-448.014336 0-247.416832-200.568832-447.98976-447.993856-447.98976z m0 855.303168c-224.958464 0-407.297024-182.35904-407.297024-407.313408 0-224.946176 182.33856-407.297024 407.297024-407.297024 224.950272 0 407.30112 182.350848 407.30112 407.297024 0 224.954368-182.350848 407.313408-407.30112 407.313408zM308.224 552.96h407.552v-81.92H308.224v81.92z"
                  p-id="15303"
                  fill="#999fa9"
                ></path>
              </svg>
            </div>
          </div>
          <div v-else style="width: 24px; height: 24px"></div>
        </div>
      </div>
      <Gradient
        v-if="jsonSchemaTool.contentExist(currentSchema.items) && itemExpand"
        :currentSchema.sync="currentSchema.items"
        :parentSchema="currentSchema"
        :currentIndex="currentIndex + 1"
        :writable="writable"
      ></Gradient>
    </template>
    <!-- 当前节点的类型为object -->
    <template v-if="jsonSchemaTool.isComplexType(currentSchema, 1)">
      <template
        v-for="property in jsonSchemaTool.schemaProperties(currentSchema)"
      >
        <!-- 对象中含有引用类型 -->
        <Gradient
          v-if="
            jsonSchemaTool.schemaPropertiesRef(currentSchema, property)[
              '$ref'
            ] != undefined
          "
          :key="property + 'Ref'"
          :currentName="undefined"
          :currentSchema="
            jsonSchemaTool.schemaPropertiesRef(currentSchema, property)
          "
          :parentSchema="currentSchema"
          :currentIndex="currentIndex"
          :writable="false"
        ></Gradient>
        <!-- 对象中其他普通类型 -->
        <Gradient
          v-else
          :key="property"
          :currentName="property"
          :currentSchema.sync="currentSchema.properties[property]"
          :parentSchema="currentSchema"
          :currentIndex="currentIndex + 1"
          :writable="writable"
        ></Gradient>
      </template>
    </template>
    <!-- 当前节点的类型为ref引用 -->
    <template v-if="jsonSchemaTool.isComplexType(currentSchema, 2)">
      <Gradient
        :currentSchema="
          jsonSchemaTool.analysisSchemaRef(jsonSchema, currentSchema['$ref'])[
            'value'
          ]
        "
        :parentSchema="
          jsonSchemaTool.analysisSchemaRef(jsonSchema, currentSchema['$ref'])[
            'value'
          ]
        "
        :currentIndex="currentIndex + 1"
        :writable="false"
      ></Gradient>
      <div class="quote-header">
        <el-popover
          popper-class="common-popover"
          placement="top"
          title="去编辑该数据模型"
          trigger="hover"
        >
          <div slot="reference" class="quote-header-item">
            <span style="display: flex; align-items: center">
              <img
                :src="require(`/public/images/jsonSchema/qoute-model.svg`)"
                alt=""
                style="width: 14px; height: 14px"
              />
            </span>
            <span>三维</span>
            <span style="display: flex; align-items: center">
              <span role="img" class="appIcon">
                <svg-icon icon-class="quote-share" width="14" height="14" />
              </span>
            </span>
          </div>
        </el-popover>
        <el-popover
          popper-class="common-popover"
          placement="top"
          title="解除关联后可修改内容"
          trigger="hover"
        >
          <div slot="reference" class="quote-header-item">解除关联</div>
        </el-popover>
        <div class="quote-header-item" style="margin-right: 0px">删除</div>
      </div>
      <div
        class="quote-box"
        :id="`quote-box-${currentIndex}-${new Date().getTime()}`"
      ></div>
      <div
        class="quote-drag"
        :id="`quote-drag-${currentIndex}-${new Date().getTime()}`"
      ></div>
    </template>
  </div>
</template>

<script>
import { mapState } from "vuex";
import jsonSchemaToolHandle from "@/utils/jsonSchema-tool.js";
import TypeForm from "./type-form.vue";
export default {
  name: "GradientMultiple",
  data() {
    return {
      jsonSchemaTool: null,
      jsonSchema: null, // 当前模型的全量jsonSchema数据
      itemExpand: true, // 数组类型的item是否展开
    };
  },
  components: {
    TypeForm,
  },
  props: {
    currentName: {
      type: String,
    },
    currentSchema: {
      type: Object,
    },
    parentSchema: {
      type: Object,
    },
    currentIndex: {
      type: Number,
    },
    writable: {
      type: Boolean,
    },
    treeData: {
      type: Array,
    },
    globalTreeData: {
      type: Array,
    },
  },
  computed: {
    ...mapState({
      list2: (state) => state.model_scenario.menu_list.list2,
      list3: (state) => state.model_scenario.menu_list.list3,
    }),
  },
  beforeCreate() {
    // 因为Gradient组件调用了GradientMultiple组件，而GradientMultiple组件
    //又调用了Gradient组件，所以需要在beforeCreate中注册Gradient组件，否则会一直提示Graident组件未定义
    this.$options.components.Gradient = require("./gradient.vue").default;
  },
  created() {
    this.jsonSchemaTool = new jsonSchemaToolHandle(this);
    this.jsonSchema = JSON.parse(
      JSON.stringify(this.$store.getters.schemaJson)
    );
  },
  mounted() {
    const quoteBoxList = document.querySelectorAll(".quote-box");
    const quoteDragList = document.querySelectorAll(".quote-drag");
    Array.prototype.forEach.call(quoteBoxList, (dom) => {
      if (dom && dom.style.left.length > 0) {
        return;
      } else {
        const num1 = this.currentIndex / 2;
        const num2 = this.currentIndex % 2;
        if (dom.id.includes(`quote-box-${this.currentIndex + 1}-`)) {
          dom.style.left =
            (Number(num1.toFixed(0)) + num2 - 1) * 16 + 11 + "px";
        }
      }
    });
    Array.prototype.forEach.call(quoteDragList, (dom) => {
      if (dom && dom.style.left.length > 0) {
        return;
      } else {
        const num1 = this.currentIndex / 2;
        const num2 = this.currentIndex % 2;
        if (dom.id.includes(`quote-drag-${this.currentIndex + 1}-`)) {
          dom.style.transform =
            "translate(" +
            (Number(num1.toFixed(0)) + num2 - 1) * 16 +
            "px,-50%)";
        }
      }
    });
  },
  methods: {
    // 点击新增按钮的菜单项
    handleMenuClick(id) {
      switch (id) {
        case 1:
          // 新增相邻节点
          break;
        case 2:
          // 新增子节点
          break;
      }
    },
    // 提取为数据模型
    dataModelExtract() {},
    // 节点类型切换
    handleChangeType(type) {},
    // 监听点击节点类型弹出popover事件
    handleShowType(ref) {
      if (!this.writable) {
        // 如果是引用，就阻止popover的弹出
        this.$refs[ref].doClose();
      }
    },
    updateNodeDataType() {},
    // 监听popover弹框打开的方法
    showPopover(popoverRef, formRef) {
      const that = this;
      const dom = document.getElementById("category-structure-detail");
      dom.addEventListener("scroll", function () {
        that.jsonSchemaTool.closePopover();
      });
      if (this.$refs[formRef]) {
        this.$nextTick(() => {
          this.$refs[formRef].init(popoverRef);
        });
      }
    },
    // 更新popover弹框的位置，防止超出界面导致出现滚动条不美观
    updatePopoverPos(popoverRef) {
      this.$nextTick(() => {
        const popoverDom = this.$refs[popoverRef].$refs.popper;
        // 设置级联面板的位置在按钮右侧,并且不会超出屏幕范围
        const x = popoverDom.offsetLeft;
        const y = popoverDom.offsetTop;
        const panelHeight = popoverDom.offsetHeight;
        if (y + panelHeight > window.innerHeight) {
          // 如果面板底部超出屏幕，则将面板位置调整到按钮上方
          this.$refs[popoverRef].$refs.popper.style.top =
            y - panelHeight + 100 + "px";
        } else {
          // 否则，将面板位置显示在按钮下方
          this.$refs[popoverRef].$refs.popper.style.top = y - 50 + "px";
        }
        // 设置级联面板的位置
        this.$refs[popoverRef].$refs.popper.style.position = "absolute";
        this.$refs[popoverRef].$refs.popper.style.left = x + "px";
      });
    },
    // 关闭popover弹框
    hidePopover(formRef) {
      const formData = this.$refs[formRef].form;
    },
    // 更新父组件的jsonschema数据
    updateJsonSchema(key, value) {
      this.$emit("updateJsonSchema", key, value);
    },
  },
};
</script>

<style lang="scss" scoped>
.gradient-multiple-container {
  position: relative;
  &:hover {
    .quote-box {
      opacity: 1;
    }
    .quote-header,
    .quote-drag {
      display: flex !important;
    }
  }
}
</style>